<template>
  <div class="chat-page">
    <div class="chat-container">
      <!-- 顶部导航栏 -->
      <div class="chat-header">
        <div class="header-left">
          <el-icon class="back-icon" @click="$router.go(-1)"><ArrowLeft /></el-icon>
          <el-avatar :size="40" :src="targetAvatar" />
          <div class="contact-info">
            <span class="contact-name">{{ targetName }}</span>
            <span class="contact-status">在线</span>
          </div>
        </div>
        <div class="header-right">
          <el-icon><More /></el-icon>
        </div>
      </div>

      <!-- 聊天消息区域 -->
      <div class="messages-wrapper" ref="messagesContainer">
        <div v-for="(msg, index) in messages" 
             :key="index"
             :class="['message-item', msg.isSelf ? 'self' : 'other']">
          <div class="message-avatar">
            <el-avatar :size="40" :src="msg.isSelf ? userAvatar : targetAvatar" />
          </div>
          <div class="message-bubble">
            <div class="message-content" :class="{ 'self-content': msg.isSelf }">
              {{ msg.content }}
            </div>
            <div class="message-time">{{ msg.time }}</div>
          </div>
        </div>
      </div>

      <!-- 底部输入区域 -->
      <div class="input-wrapper">
        <div class="toolbar">
          <el-icon><Picture /></el-icon>
          <el-icon><VideoCamera /></el-icon>
          <el-icon><Files /></el-icon>
        </div>
        <div class="input-area">
          <el-input
            v-model="inputMessage"
            type="textarea"
            :rows="1"
            resize="none"
            placeholder="输入消息..."
            @keyup.enter.native.exact="sendMessage"
            @keyup.enter.native.shift.exact="inputMessage += '\n'"
          />
          <el-button type="primary" :icon="Send" circle @click="sendMessage" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ArrowLeft, More, Picture, VideoCamera, Files, Send } from '@element-plus/icons-vue'

export default {
  name: 'Communication',
  components: {
    ArrowLeft,
    More,
    Picture,
    VideoCamera,
    Files,
    Send
  },
  setup() {
    const route = useRoute()
    const targetName = ref(route.query.targetName || '联系人')
    const targetAvatar = ref(route.query.targetAvatar || '')
    const userAvatar = ref('https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
    const inputMessage = ref('')
    const messages = ref([
      {
        content: '您好！请问有什么可以帮您的吗？',
        time: '14:00',
        isSelf: false
      }
    ])

    const sendMessage = () => {
      if (!inputMessage.value.trim()) return

      messages.value.push({
        content: inputMessage.value,
        time: formatTime(new Date()),
        isSelf: true
      })

      inputMessage.value = ''

      // 模拟回复
      setTimeout(() => {
        messages.value.push({
          content: '收到您的消息，我会尽快回复。',
          time: formatTime(new Date()),
          isSelf: false
        })
      }, 1000)
    }

    const formatTime = (date) => {
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    }

    return {
      targetName,
      targetAvatar,
      userAvatar,
      inputMessage,
      messages,
      sendMessage
    }
  }
}
</script>

<style scoped>
.chat-page {
  height: 100vh;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
}

.chat-container {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.chat-header {
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-icon {
  font-size: 20px;
  color: #666;
  cursor: pointer;
}

.contact-info {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.contact-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.contact-status {
  font-size: 12px;
  color: #67c23a;
}

.messages-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #f0f2f5;
}

.message-item {
  display: flex;
  margin-bottom: 24px;
  gap: 12px;
}

.message-item.self {
  flex-direction: row-reverse;
}

.message-bubble {
  max-width: 60%;
}

.message-content {
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  line-height: 1.5;
}

.self-content {
  background: #95ec69;
  color: #000;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.input-wrapper {
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #eaeaea;
}

.toolbar {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  color: #666;
}

.toolbar .el-icon {
  font-size: 20px;
  cursor: pointer;
}

.input-area {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.el-input {
  flex: 1;
}

:deep(.el-textarea__inner) {
  border-radius: 20px;
  padding: 8px 16px;
  resize: none;
  min-height: 40px !important;
  max-height: 120px;
}

.el-button {
  margin-bottom: 5px;
}

/* 滚动条样式 */
.messages-wrapper::-webkit-scrollbar {
  width: 6px;
}

.messages-wrapper::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.messages-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
</style> 